<template>
  <div>
    <h1>
      新建车票
      <p>
        <el-tag size="large" @click="$router.push('/ticket')"> 取消 </el-tag>
        &emsp;
        <el-tag @click="addSub" size="large"> 添加 </el-tag>
      </p>
    </h1>
    <h3>基本信息</h3>
    <!-- 车次train -->
    <el-form :model="form" label-width="30px" class="form">
      <el-form-item>
        <a> 车次 </a>
        <el-input size="small" placeholder="车次" v-model="form.train" />
        <el-form-item label="">
          <a> 类型 </a>
          <el-select
            class="m-2"
            placeholder="Select"
            size="default"
            v-model="form.type"
          >
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" class="date">
          <a> 出发日期 </a>
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="出发日期 a day"
            format="YYYY-MM-DD"
            :value-format="YYYY - MM - DD"
          />
        </el-form-item>
      </el-form-item>
    </el-form>
    <!--  line -->
    <el-form :model="form" class="form">
      <el-form-item>
        <a> 出发站 </a>
        <el-select
          class="m-2"
          placeholder="Select"
          size="default"
          v-model="form.line"
        >
          <el-option
            v-for="item in city"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-form-item label="">
          <a> 到达站 </a>
          <el-select
            class="m-2"
            placeholder="Select"
            size="default"
            v-model="form.line1"
          >
            <el-option
              v-for="item in city1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="date">
          <a> 座位 </a>
          <el-input-number v-model="form.business" :min="1" :max="10" />
        </el-form-item>
      </el-form-item>
    </el-form>
    <!-- time -->
    <el-form :model="form" label-width="30px" class="form">
      <el-form-item>
        <a> 出发时间 </a>
        <el-time-select
          v-model="form.time"
          start="01:30"
          step="00:15"
          end="18:30"
          placeholder="Select time"
          style="width: 200px; marginTop: 20px"
        />
        &emsp;
        <el-form-item>
          <a> 到达时间 </a>
          <el-time-select
            v-model="form.time1"
            start="10:30"
            step="00:15"
            end="18:30"
            placeholder="Select time"
            style="width: 200px; marginTop: 20px"
          />
        </el-form-item>
      </el-form-item>
    </el-form>
    <!-- 详情 -->
    <h5>车票添加详情</h5>
    <Table :tableData="list" @getlist="getlist" />
  </div>
</template>

<script>
import { AddTicket } from "api";
import { GetUrl } from "@/request/request";
import Table from "../Ticket/component/Table.vue";
import { ElMessage } from "element-plus";
export default {
  components: { Table },
  data() {
    return {
      city: ["呼和浩特", "上海", "呼伦贝尔", "南京", "山东", "济宁", "青岛"],
      city1: ["阿拉善盟", "天津", "合肥", "湖南", "安徽", "苏州", "南阳"],
      form: {
        line: "呼和浩特",
        line1: "银川",
        time: "",
        time1: "",
        date: "2022-12-4",
        type: "普快",
        state: "停用",
        train: "",
        name: "",
        business: 1,
      },
      options: [
        "高速动车",
        "动车组",
        "城际高速",
        "直达特快",
        "空调特快",
        "快速",
        "普快",
      ],
      options1: ["停用", "启用"],
      list: [],
    };
  },
  methods: {
    async getlist() {
      const res = await GetUrl("/get");
      this.list = res.data.ticket.slice(85, 130);
      console.log(res.data.ticket);
    },
    async addSub() {
      console.log(this.form);
      const res = await AddTicket({ ...this.form });
      ElMessage({
        message: res.data.msg,
        type: res.data.code === 200 ? "success" : "warrning",
      });
      this.getlist();
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang='scss' scoped>
h1 {
  display: flex;
  width: 100%;
  line-height: 30px;
  border-bottom: solid 1px #ccc;
  padding-bottom: 20px;
  font-size: 30px;
  justify-content: space-between;
  margin-bottom: 30px;
}
.a {
  margin-bottom: 20px;
}
.form {
  margin: 30px auto;
  width: 100%;
  font-size: 30px;
  a {
    font-size: 17px;
    width: 70px;
  }
  .el-input,
  .el-select {
    height: 30px;
    width: 100%;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  .date {
    margin-top: 15px;
  }
}
.el-tag {
  font-size: 23px;
  padding: 10px 20px;
  cursor: pointer;
}
h3,
h5 {
  font-size: 24px;
}
h5 {
  margin-top: 70px;
  margin-bottom: 30px;
}
</style>